<template>
  <div class="sm-container">
    <div class="header-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="设备名">
          <el-input v-model="formInline.name" placeholder="设备名" />
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="formInline.num" placeholder="编号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">搜索</el-button>
        </el-form-item>
        <el-button type="success" icon="el-icon-circle-plus" style="right: 20px;" @click="openAddDialog">添加</el-button>
        <el-button type="primary" @click="exportExcel">导出Excel</el-button>
      </el-form>
    </div>

    <el-table
      class="table-container"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="name"
        label="设备"
        width="150"
      />
      <el-table-column
        prop="number"
        label="编号"
        width="120"
      />
      <el-table-column
        prop="softwareSystem"
        label="系统"
        width="180"
      />
      <!-- <el-table-column label="机型">
          <template slot-scope="scope">
            <img :src="scope.row.thumbnail" width="40%" height="auto">
          </template>
        </el-table-column> -->
      <el-table-column
        prop="supplier"
        label="供应商"
        width="180"
      />
      <el-table-column
        prop="purpose"
        label="作用"
        width="200"
      />

      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="购入时间"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | formatDate }}
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="220"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="openViewDialog(scope.row)">查看</el-button>
          <el-button type="info" size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteSm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      class="foot-container"
      layout="prev, pager, next, total, jumper"
      :page-size="pagesize"
      :total="itemToltal"
      @current-change="current_change"
    />

    <!-- 查看框 -->
    <el-dialog title="详情" :visible.sync="isViewDialogVisible" class="details-dialog" center>
      <div>
        <p>设备名: {{ viewedData.name }}</p>
        <p>编号: {{ viewedData.number }}</p>
        <p>用途: {{ viewedData.purpose }}</p>
        <p>系统: {{ viewedData.softwareSystem }}</p>
        <p>状态: {{ getStatusText(viewedData.status) }}</p>
        <p>供应商: {{ viewedData.supplier }}</p>
        <p>类型: {{ viewedData.type }}</p>
        <p>版本: {{ viewedData.versionNumber }}</p>
        <p>购入时间: {{ viewedData.createTime | formatDate }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isViewDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog title="编辑" :visible.sync="isEditDialogVisible" center>
      <el-form :model="editedData" label-width="80px">
        <!-- 在这里添加你的表单字段 -->
        <el-form-item label="设备ID">
          <el-input v-model="editedData.simulationEquipmentId" :disabled="true" />
        </el-form-item>
        <el-form-item label="设备名">
          <el-input v-model="editedData.name" />
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="editedData.number" />
        </el-form-item>
        <el-form-item label="系统">
          <el-input v-model="editedData.softwareSystem" />
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="editedData.supplier" />
        </el-form-item>
        <el-form-item label="作用">
          <el-input v-model="editedData.purpose" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editedData.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEditedData">保存</el-button>
      </span>
    </el-dialog>

    <!-- 添加弹出框 -->
    <el-dialog title="添加" :visible.sync="isAddDialogVisible" class="add-dialog" center>
      <el-form :model="newData" :rules="newDataRules" label-width="80px">
        <!-- 在这里添加你的表单字段 -->
        <el-form-item label="设备名" prop="name">
          <el-input v-model="newData.name" />
        </el-form-item>
        <el-form-item label="编号" prop="number">
          <el-input v-model="newData.number" />
        </el-form-item>
        <el-form-item label="用途" prop="purpose">
          <el-input v-model="newData.purpose" />
        </el-form-item>
        <el-form-item label="系统" prop="softwareSystem">
          <el-input v-model="newData.softwareSystem" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input v-model="newData.status" />
        </el-form-item>
        <el-form-item label="供应商" prop="supplier">
          <el-input v-model="newData.supplier" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input v-model="newData.type" />
        </el-form-item>
        <el-form-item label="版本" prop="versionNumber">
          <el-input v-model="newData.versionNumber" />
        </el-form-item>

        <!-- 其他表单字段 -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAddDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addData">保存</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>
export default {
  filters: {
    formatDate(value) {
      if (Array.isArray(value) && value.length === 6) {
        const [year, month, day, hour, minute, second] = value
        const date = new Date(year, month - 1, day, hour, minute, second)
        return date.toLocaleString()
      }
      return value // Return original value if not a valid array
    }
  },

  data() {
    return {
      /** 搜索框数据 */
      formInline: {
        name: '',
        num: ''
      },

      /** 列表数据、行数... */
      tableData: [],
      itemToltal: 0,
      pagesize: 10,
      currentPage: 1,

      /** 编辑框 */
      isEditDialogVisible: false,
      editedData: {
        simulationEquipmentId: null,
        name: '',
        number: '',
        softwareSystem: '',
        supplier: '',
        purpose: '',
        status: ''
      }, // 存储正在编辑的数据

      options: [{
        value: 1,
        label: '正常'
      }, {
        value: 2,
        label: '维修'
      }, {
        value: 3,
        label: '其他'
      }],

      /** 查看框数据 */
      isViewDialogVisible: false,
      viewedData: {
        laboratoryId: '',
        name: '',
        number: '',
        purpose: '',
        softwareSystem: '',
        status: '',
        supplier: '',
        type: '',
        updateTime: '',
        versionNumber: ''
      }, // 存储当前查看的设备数据

      typeHash: {
        1: '台式机',
        2: '投影仪',
        3: '笔记本'
      },
      /** 添加数据 */
      isAddDialogVisible: false,
      newData: {
        laboratoryId: '',
        name: '',
        number: '',
        purpose: '',
        softwareSystem: '',
        status: '',
        supplier: '',
        type: '',
        updateTime: '',
        versionNumber: ''
      // 其他表单字段
      },
      newDataRules: {
        name: [
          { required: true, message: '请输入设备名', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入设备编号', trigger: 'change' }
        ],
        purpose: [
          { required: true, message: '请输入设备用途', trigger: 'change' }

        ],
        softwareSystem: [
          { required: true, message: '请输入设备系统', trigger: 'change' }

        ],
        status: [
          { required: true, message: '请选择设备状态', trigger: 'change' }

        ],
        supplier: [
          { required: true, message: '请选择设备供应商', trigger: 'change' }

        ],
        type: [
          { required: true, message: '请输入设备类型', trigger: 'change' }

        ],
        versionNumber: [
          { required: true, message: '请输入设备版本', trigger: 'change' }

        ]
      }

    }
  },
  computed: {

  },
  mounted() {
    this.getData()
  },
  methods: {
    getStatusText(status) {
      return status === 1 ? '正常' : status === 2 ? '维修' : '其他'
    },

    getStatusTagType(status) {
      return status === 1 ? 'success' : status === 2 ? 'warning' : 'info'
    },

    /** 查看数据 */
    openViewDialog(row) {
      this.isViewDialogVisible = true
      this.viewedData = { ...row }
    },

    /** 修改数据 */
    openEditDialog(row) {
      this.editedData.simulationEquipmentId = row.simulationEquipmentId
      this.isEditDialogVisible = true
      this.editedData = { ...row }
    },
    async saveEditedData(row) {
      try {
        const res = await this.$API.simulation.updateSm(this.editedData.simulationEquipmentId, this.editedData)
        if (res.success) {
          this.$message.success(res.message)
          this.getData()
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        console.log('编辑失败', err)
      }
      this.isEditDialogVisible = false
    },

    /** 添加数据 */
    openAddDialog() {
      this.isAddDialogVisible = true
    },
    async addData() {
      try {
        const res = await this.$API.simulation.addSm(this.newData)
        if (res.success) {
          this.$message.success(res.message)
          this.getData()
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        console.log('添加失败', err)
      }

      this.isAddDialogVisible = false
      // 清空新增数据对象
      this.newData = {
        laboratoryId: '',
        name: '',
        number: '',
        purpose: '',
        softwareSystem: '',
        status: '',
        supplier: '',
        type: '',
        updateTime: '',
        versionNumber: ''
      }
    },

    /** 删除数据 */
    async deleteSm(row) {
      try {
        const confirmResult = await this.$confirm('是否删除该设备信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        if (confirmResult) {
          const id = row.simulationEquipmentId
          const res = await this.$API.simulation.removeSm(id)

          if (res.success) {
            this.$message.success(res.message)
            this.getData() // 刷新数据
          } else {
            this.$message.error(res.message)
          }
        }
      } catch (error) {
        console.error('删除设备信息出错：', error)
      }
    },

    /** 获取数据 */
    async getData() {
      try {
        const res = await this.$API.simulation.getSmPage({
          pageNum: this.currentPage,
          pageSize: this.pagesize,
          num: this.formInline.num,
          name: this.formInline.name
        })
        this.tableData = res.data.data.records
        this.itemToltal = res.data.data.total
      } catch (err) {
        console.log(err)
      }
    },
    current_change(currentPage) {
      this.currentPage = currentPage
      this.getData()
    },

    /** 导出Excel */
    async exportExcel() {
      try {
        const response = await this.$API.simulation.exportToExcel()

        const blob = new Blob([response.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })

        const elink = document.createElement('a')
        elink.href = URL.createObjectURL(blob)
        elink.download = '仿真设备列表.xlsx'
        elink.style.display = 'none'
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      } catch (error) {
        console.error('导出Excel出错：', error)
      }
    }

  }
}

</script>
<style lang="scss" scoped>

element.style {
    padding-right:0px;
}
.sm-container{
  background-color: white;
  border-radius: 20px;
  padding: 20px;
  .demo-form-inline{
    text-align: center;
  }
  .foot-container{
    text-align: center;
    margin-top: 10px  ;
  }

  .details-dialog{
    padding-right: -15px;
    margin-right: -15px;
    font-weight: 400;
    // background-color: pink;
  }

}
</style>
